{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datetimepicker/bootstrap-datetimepicker.min.css' %}">


    <style>
        .hide{
            display: none;
        }
         .shade {
            position: fixed;
            z-index: 1040;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #999;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

        .loading {
            position: fixed;
            z-index: 1050;
            top: 40%;
            left: 50%;
            height: 32px;
            width: 32px;
            margin: 0 0 0 -16px;
            background: url(/static/img/loading.gif);
        }

        td.chosen{
            background-color: green;
        }
        td.temp{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class='input-group' style="width: 230px;">
            <input type='text' class="form-control" id='datetimepicker11' placeholder="请选择日期"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar">
                </span>
            </span>

        </div>
    <a class="btn btn-primary" id="save">保存</a>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>会议室</th>
                    {% for item in time_choices %}
                    <th>{{ item.1 }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody id="tBody">

            </tbody>
        </table>

    </div>


    <div class="shade hide"></div>
    <div class="loading hide"></div>

    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>

    <script src="{% static 'plugins/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script>
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };



        $(function () {
            $('#datetimepicker11').datetimepicker({
                minView: "month",
                language: "zh-CN",
                sideBySide: true,
                format: 'yyyy-mm-dd',
                startDate: new Date(),
                bootcssVer: 3
                //autoclose: true,
            }).on('changeDate', xxxxxxxxxx);

            var currentDate = new Date();
            getBookInfo(currentDate.Format('yyyy-MM-dd'));

            bindTdEvent();
            bindSaveEvent();
        });

        /*
        获取预定信息
         */
        function getBookInfo(choice_date) {

            $('.shade,.loading').removeClass('hide');

            $.ajax({
                url:'/booking/',
                type:'GET',
                data:{choice_date:choice_date},
                success:function (arg) {
                    // arg.status,arg.data.arg.msg
                    $('.shade,.loading').addClass('hide');
                    if(arg.status){
                        /*
                         [
                            [{'text':'天上人间'},{'text':''},{'text':'王大锤1'},],
                            [{'text':'海天盛筵'},{'text':''},{'text':'王大锤2'},],
                            [{'text':'新阳会所'},{'text':''},{'text':'王大锤3'},],
                        ]

                        <tr>
                            <td>天上人间</td>
                            <td></td>
                            <td>王大锤1</td>
                        </tr>
                        <tr>
                            <td>海天盛筵</td>
                            <td></td>
                            <td>王大锤1</td>
                        </tr>
                         */
                        $('#tBody').empty();
                        $.each(arg.data,function (i,item) {
                            //[ {'text':'天上人间'},{'text':''},{'text':'王大锤1'},],
                            var tr = document.createElement('tr');
                            $.each(item,function (j,v) {
                                // {'text':'天上人间',attrs: {k1:v1,'k2:v2}  }
                                var td = document.createElement('td');
                                $(td).text(v.text);

                                $.each(v.attrs,function (ak,av) {
                                    $(td).attr(ak,av);
                                });

                                $(tr).append(td);
                            });
                            $('#tBody').append(tr);
                        });

                        CHOSEN_DATE = new Date().Format('yyyy-MM-dd');
                        POST_DATA = {
                            DEL:{},
                            ADD:{}
                        };
                    }else{
                        alert(arg.msg);
                    }
                },
                error:function () {
                    $('.shade,.loading').removeClass('hide');
                }
                
            })
        }
        
        
        function xxxxxxxxxx(ev) {
            CHOSEN_DATE = ev.date.Format('yyyy-MM-dd');
            getBookInfo(CHOSEN_DATE)
        }

        CHOSEN_DATE = new Date().Format('yyyy-MM-dd');
        POST_DATA = {
            DEL:{},
            ADD:{}
        };

        function bindTdEvent() {
            $('#tBody').on('click','td[time_id][fuck!="true"]',function () {
                var room_id = $(this).attr('room_id');
                var time_id = $(this).attr('time_id');
                if($(this).hasClass('chosen')){
                    $(this).removeClass('chosen').empty();
                    // 退订 roo_id=4   time_id=5
                    // 退订 roo_id=4   time_id=6
                    if(POST_DATA.DEL[room_id]){
                        POST_DATA.DEL[room_id].push(time_id);
                    }else{
                        POST_DATA.DEL[room_id] = [time_id ];
                    }
                } else if($(this).hasClass('temp')){
                    $(this).removeClass('temp');
                    // 在ADD中找到并删除
                    var index = POST_DATA.ADD[room_id].indexOf(time_id);
                    if(index !== -1){
                        POST_DATA.ADD[room_id].splice(index,1);
                    }


                }else{
                    $(this).addClass('temp');
                    if(POST_DATA.ADD[room_id]){
                        POST_DATA.ADD[room_id].push(time_id);
                    }else{
                        POST_DATA.ADD[room_id] = [time_id ];
                    }


                }
            })



        }
        
        function bindSaveEvent() {
            $('#save').click(function () {
                $.ajax({
                    url: "/booking/",
                    type: 'POST',
                    data: {data:JSON.stringify(POST_DATA),date:CHOSEN_DATE,csrfmiddlewaretoken:'{{ csrf_token }}'},
                    success:function (arg) {
                        if(arg.status){
                            getBookInfo(CHOSEN_DATE);

                        }else{
                            alert(arg.msg);
                        }
                    }
                })


            })
        }
    </script>

</body>
</html>